{% extends "base.html" %}
{% block title %}{{ Project.title }} - 氧化钙{% endblock %}
{% block head %}
<link rel="stylesheet" href="static/css/base.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<span id="getId" data-Project_id= "{{ Project.id }}" data-is_love= "{{ is_love }}" data-is_collection = "{{ is_collection }}"></span>
<script type="application/javascript">
  const getId = document.getElementById('getId');
  const Project_id = getId.getAttribute("data-Project_id");
  var is_love = getId.getAttribute("data-is_love");
  var is_collection = getId.getAttribute("data-is_collection");
  console.log(Project_id)
  window.scratchConfig = {
    stageArea:{
      scale: 1, //自适应屏幕尺寸
      width: 480,
      height: 360,
      showControl: true, //是否显示舞台区控制按钮
      fullscreenButton:{ //全屏按钮
        show: true,
        handleBeforeSetStageUnFull(){ //退出全屏前的操作
          return true
        },
        handleBeforeSetStageFull(){ //全屏前的操作
          return true
        }
      },
      startButton:{ //开始按钮
        show: true,
        handleBeforeStart(){ //开始前的操作
          return true
        }
      },
      stopButton:{ // 停止按钮
        show: true,
        handleBeforeStop(){ //停止前的操作
          return true
        }
      }
    },
    handleVmInitialized: (vm) => {
      window.vm = vm  
      //vm.loadProject("/static/scratch/static/project/1.sb3")    
    },
    handleProjectLoaded:() => {
    },
    handleDefaultProjectLoaded:() => {
    },
    //默认项目地址,不需要修请删除本配置项
    defaultProjectURL: "../static/upload/project/" + Project_id.toString() + ".sb3",
  }
</script>
<style>
  body{
    background-color: #f3f3f3;
  }
</style>
{% endblock %}
{% block body %}

<div class="main_body">
<div class="main_in_body">

  <h4 id="title-show">{{ Project.title }}</h4>
  <input type="text" style="display:none" class="form-control" placeholder="{{ Project.title }}" id="title-input">
  <p style="color: darkgray;">作者: <a href="/User/{{ Project.author_id }}">{{ project_author }}</a></p>
  <div class="row">
    <div id="scratch" style="width: 480px;margin-left: 10px;margin-top: -25px;">
      <p>Loading……</p>
      </div>
        <div class="card-profile">
          <div class="row" style="margin-left: 2px;">
          <a href="/editor/{{ Project.id }}" class="btn btn-primary btn-sm">转到设计页面</a> {%if is_author == 1%}<button type="button" style="margin-left: 10px;" class="btn btn-light btn-sm" id="editor">编辑</button>{% endif %}
        </div>
          <p id="profile-show" >{{ Project.profiles }}</p>
          <textarea id="profile-input" style="display: none;margin-top:10px;height: 95%;width: 100%;" class="form-control" aria-label="With textarea"></textarea>
        </div>
  </div>
  <hr>
<div class="row" style="margin-left: 0px;margin-top: 10px;">
  <p id="love" style="color: gray;"><i class="fa fa-heart" style="font-size:20px;"></i>  <p style="color: gray;margin-left: 5px;" id="love_text"> {{ Project.love }}</p> </p>
  <p id="collection" style="margin-left: 10px;color: gray;"> <i class="fa fa-star" style="font-size:20px;"></i> <p style="color: gray;margin-left: 5px;" id="collection_text"> {{ Project.collection }}</p>   </p>
  <p style="margin-left: 10px;color: gray;"> <i class="fa fa-eye" style="font-size:20px"></i>  {{ Project.see }} </p>
</div> 

<hr>

<form target="Iframe" action="/sendcomment" method="post">
  <textarea style="margin-top: 10px;margin-bottom: 10px;" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
  <button type="submit" class="btn btn-primary btn-sm" >发送</button>
  <button type="button" class="btn btn-secondary btn-sm">取消</button>
  <input style="display: none;" type="text"  name="place" value="{{ Project.id }}" id="place">
  <iframe id="Iframe" name="Iframe" height="30px" style="display: none;"></iframe>
  <hr>
</form>

{% for i in range(0,comment_item|length) %}
<div class="media">
  <img  src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
  <div class="media-body">
    <div class="row" style="margin-left: 10px;">
      <h5 class="mt-0">{{comment_item[i].user_id}}</h5><h5 style="color: darkgrey;">#{{comment_user_id[i][0]}}</h5>
    </div>
    <p style="margin-left: 10px;margin-bottom: 0px;" >{{comment_item[i].text}}</p>

      <a href="#reply{{i}}" style="margin-left: 10px;" data-bs-toggle="collapse">回复</a>
      <div id="reply{{i}}" class="collapse" style="margin-left: 10px;">

        <form target="Iframe" action="/replycomment" method="post">
          <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_item[i].user_id }}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
          <button type="submit" class="btn btn-primary btn-sm" >发送</button>
          <button type="button" class="btn btn-secondary btn-sm">取消</button>
          <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
          <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][1]}}" id="reply_user_id">
        </form>
      </div>



    {% for j in range(0, comment_reply[i]|length)%}
    <div class="media mt-3" style="margin-left: 10px;">
      <a class="mr-3" href="#">
        <img src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
      </a>
      <div class="media-body" style="margin-left: 10px;">
        <div class="row">
          <h5 class="mt-0">{{ comment_reply[i][j][0] }}</h5>
        </div>
        <div class="row">
          <h6 style="color: blue;">@ {{ comment_reply[i][j][2] }}</h6>
        </div>
        <p style="margin-bottom: 0px;">{{ comment_reply[i][j][1] }}</p>

        <a href="#reply{{i}}{{j}}"  data-bs-toggle="collapse">回复</a>
        <div id="reply{{i}}{{j}}" class="collapse" >
          <form target="Iframe" action="/replycomment" method="post">
            <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_reply[i][j][0] }}#{{comment_user_id[i][j+1]}}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
            <button type="submit" class="btn btn-primary btn-sm" >发送</button>
            <button type="button" class="btn btn-secondary btn-sm">取消</button>
            <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
            <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][j+2]}}" id="reply_user_id">
          </form>
        </div>

      </div>
    </div>
    {% endfor %}

  </div>
</div>
{% endfor %}
</div>
</div>


<script type="text/javascript" src="/static/scratch/lib.min.js"></script>
<script type="text/javascript" src="/static/scratch/chunks/player.js"></script>
<script>
	// 下面
	$(document).ready(function(){
    if( is_love == "true"){
      $("#love").attr("style","color: red;margin-left: 10px;");
    }
    $("#love").click(function(){
      if( $(this).css("color") == "rgb(255, 0, 0)"){
        $(this).attr("style","color: gray;");
        $('#upload_Modal').modal('show')
        document.getElementById("love_text").innerHTML = parseInt(document.getElementById("love_text").innerHTML) -1
        upload(-1,0)
      }else{
        $(this).attr("style","color: red;");
        $('#upload_Modal').modal('show')
        document.getElementById("love_text").innerHTML = parseInt(document.getElementById("love_text").innerHTML) +1
        upload(-1,1)
      }
    });


    if( is_collection == "true"){
      $("#collection").attr("style","color: gold;");
    }

    $("#collection").click(function(){
      if( $(this).css("color") == "rgb(255, 215, 0)"){
        $(this).attr("style","margin-left: 10px;color: gray;");
        $('#upload_Modal').modal('show')
        document.getElementById("collection_text").innerHTML = parseInt(document.getElementById("collection_text").innerHTML) -1
        upload(0,-1)
      }else{
        $(this).attr("style","color: gold;margin-left: 10px;");
        $('#upload_Modal').modal('show')
        document.getElementById("collection_text").innerHTML = parseInt(document.getElementById("collection_text").innerHTML) +1
        upload(1,-1)
      }
    });

  });
  function upload(collection,love){
    $.post("/Project_operation/"+Project_id,
    {
      collection:collection,
      love:love,
    },
    function(data,status){
      setTimeout(() => {$('#upload_Modal').modal('hide')},500)
    });
  }
</script>

<div class="modal fade" id="upload_Modal" tabindex="-1" aria-labelledby="upload_Modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        正在操作...
      </div>
    </div>
  </div>
</div>
{% endblock %}